import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import i18n from 'i18n-js';
import {
  GStyleSheet,
  DynamicColors,
} from '@/utils/DarkMode';
import PageModel from '@/utils/PageModel';
import PageContainer from "@/components/PageContainer";
import ListItem from '@/components/ListItem';
import PageList from '@/container/PageList';
import { GButton } from '@/components/GButton';
import Toast from '@/utils/Toast';
import wechatIcon from '@/assets/images/my_recharg_icon_wechat.png';
import alipayIcon from '@/assets/images/my_recharg_icon_alipay.png';
import appleIcon from '@/assets/images/my_recharg_icon_ios.png';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';

const dstyles = GStyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
  },
  listBox: {
    flex: 1,
    width: '100%',
    height: '100%',
  },
  listItemBox: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    paddingLeft: 15,
    borderBottomColor: DynamicColors.borderBottomColor,
  },
  listItem: {
    borderBottomColor: DynamicColors.borderBottomColor,
    paddingRight: 15,
    paddingLeft: 0,
    paddingTop: 15,
    paddingBottom: 15,
  },
  listTitle: {
    fontSize: 16,
    marginBottom: 5,
    color: DynamicColors.normalTextColor,
  },
  listContent: {
    fontSize: 12,
    color: DynamicColors.titleTextColor,
    // lineHeight: 16,
  },
  payBox: {
    position: 'absolute',
    bottom: -50,
    right: 0,
    flexDirection: 'row',
    alignItems: 'center',
    display: 'flex',
  },
  chargeBtn: {
    width: 100,
    height: 35,
    marginLeft: 0,
    marginRight: 0,
  },
  feeBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 5,
  },
  noneBox: {
    marginTop: 100,
    textAlign: 'center',
  },
  noneRecord: {
    marginTop: 15,
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#ccc',
    textAlign: 'center',
  },
  icon: {
    width: 25,
    height: 25
  },
});

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class ChargeRecord extends React.Component<IProps> {

  componentWillUnmount() {
    Toast.hideLoading();
  }

  query = async ({ current }) => {
    const { wallet } = this.props;
    await wallet!.getChargeRecord(current);
  }

  goRecordDetail = async (orderNo) => {
    const { wallet } = this.props;
    await wallet.setChargeDetail(orderNo);
    Taro.navigateTo({ url: "/pages/wallet/ChargeRecordDetail" });
  }

  goPay = async ({ orderNo, payType, chargeModeAdditionalData }) => {
    Toast.loading(i18n.t('BUYING'));
    const { wallet } = this.props;
    const payRes = await wallet.pay({ orderNo, payType, productId: chargeModeAdditionalData });
    Toast.hideLoading();
    let isSuccess = false;
    if (payRes && payRes.isSuccess) {
      isSuccess = true;
    }
    if (isSuccess) {
      this.query({ current: 1 });
      wallet.getBalance();
    }
  }

  cancel = async (orderNo) => {
    const { wallet } = this.props;
    wallet.cancelChargeOrder(orderNo);
  }

  renderItem = ({ item, index }) => {
    const styles = dstyles.style;
    const { wallet: { chargePageData } } = this.props;
    const isLast = index === chargePageData.records.length - 1;
    const {
      payType,
      fee,
      status: orderStatus,
      ctime,
      orderNo,
      chargeModeAdditionalData,
    } = item;
    // 图标
    let icon = wechatIcon;
    let typeText = 'WECHAT';
    let status = orderStatus;
    if (payType === 3) {
      typeText = 'ALIPAY';
      icon = alipayIcon;
    } else if (payType === 10) {
      typeText = 'IOS_IN_PURCHASE';
      icon = appleIcon;
    }

    // 支付状态
    let statusText = 'WAIT_FOR_PAY';
    switch (status) {
      case 1:
        statusText = 'WAIT_FOR_PAY';
        break;
      case 2:
        statusText = 'PAYING';
        break;
      case 3:
        statusText = 'PAY_FAILED';
        break;
      case 4:
        statusText = 'HAS_PAID';
        break;
      case -1:
        statusText = 'HAS_CANCEL';
        break;
      default:
        break;
    }
    return (
      <View style={{ ...styles.listItemBox, borderBottomWidth: isLast ? 1 : 0 }}>
        <ListItem
          style={{ ...styles.listItem, paddingBottom: status === 2 ? 65 : 15, borderBottomWidth: isLast ? 0 : 1 }}
          icon={<Image src={icon} style={styles.icon} />}
          onPress={() => { this.goRecordDetail(orderNo); }}
          extra={(
            <View style={{ position: 'relative' }}>
              <View style={styles.feeBox}>
                <Image src={gizCoinIcon} style={{ width: 20, height: 20, marginRight: 5 }} />
                <Text style={{ ...styles.listTitle, marginBottom: 0, textAlign: 'right' }}>
                  {`+${fee}`}
                </Text>
              </View>
              <Text style={{ ...styles.listContent, textAlign: 'right' }}>
                {i18n.t(statusText)}
              </Text>
              {status === 2 && (
                <View style={styles.payBox}>
                  <GButton
                    style={{ ...styles.chargeBtn, marginRight: 10 }}
                    text={i18n.t('CANCEL_PAY')}
                    onPress={(e) => {
                      e.stopPropagation();
                      this.cancel(orderNo);
                    }}
                    fontSize={14}
                    primary
                  />
                  <GButton
                    style={styles.chargeBtn}
                    text={i18n.t('GO_PAY')}
                    onPress={(e) => {
                      e.stopPropagation();
                      this.goPay({ orderNo, payType, chargeModeAdditionalData });
                    }}
                    fontSize={14}
                  />
                </View>
              )}
            </View>
          )}
        >
          <View>
            <View>
              <Text style={styles.listTitle}>
                {`${i18n.t(typeText)}${i18n.t('CHARGE')}`}
              </Text>
            </View>
            <View>
              <Text style={styles.listContent}>
                {ctime}
              </Text>
            </View>
          </View>
        </ListItem>
      </View>
    );
  }

  // supportOrder = (orderList) => {
  //   const payTypeList = this.props.wallet.supportPayTypeList();
  //   const arr = orderList.filter(i => !(i.status === 2 && payTypeList.findIndex(t => t === i.payType) < 0));
  //   return arr;
  // }

  getData = () => {
    const { wallet, wallet: { chargePageData } } = this.props;
    const payTypeList = wallet!.supportPayTypeList();
    // console.log('chargePageData', chargePageData);
    const data = new PageModel(chargePageData);
    data.records = data.records.filter(i => !(i.status === 2 && payTypeList.findIndex(t => t === i.payType) < 0));
    return data;
  }

  render() {
    const styles = dstyles.style;
    const { wallet: { chargePageData } } = this.props;
    console.log('chargePageData', chargePageData);
    const pageData = this.getData();
    return (
      <PageContainer style={styles.container} title={i18n.t('CHARGE_RECORD')}>
        <View style={styles.listBox}>
          <PageList
            id='chargeRecordList'
            style={{ flex: 1, height: '100%' }}
            renderItem={this.renderItem}
            query={this.query}
            pageModel={pageData}
          />
        </View>
      </PageContainer >
    );
  }
}
